<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>works</title>
    <style>
        .example {
            margin: 150px auto 150px;
            opacity: 0;
            transition: 3s;
            position: absolute;
            top: 0;
        }

        .example p {
            font-weight: 700;
        }

        .example .case {
            width: 500px;
            margin: 10px auto;
        }

        .example img {
            width: 240px;
            height: 135px;
            vertical-align: top;
            transition: 1s;
        }

        .example span {
            height: 133px;
            width: 0;
            overflow: hidden;
            transition: 1s;
            display: inline-block;
            line-height: 135px;
            border: 1px solid #ccc;
            border-left: 0;
            border-radius: 0 10px 10px 0;
        }

        .example .case:hover img {
            box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
        }

        .example .case:hover span {
            width: 250px;
            border-left: 1px;
            box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
        }
    </style>
</head>
<body>
<div class="example">
    <p>Practice Works</p>
    <div class="case"><a href="https://logicadi.gitee.io/web/case_4_cartAnimate/"><img src="images/20180626114256.png"
                                                                                       alt=""></a><span>css3动画</span>
    </div>
    <div class="case"><a href="https://logicadi.gitee.io/web/case_3_tanchishe/"><img src="images/20180617000803.png"
                                                                                     alt=""></a><span>贪吃蛇</span></div>
    <div class="case"><a href="https://logicadi.gitee.io/web/case_2_xuanxifu/"><img src="images/20180616120150.png"
                                                                                    alt=""></a><span>[JavaScript]。。。</span>
    </div>
    <div class="case"><a href="https://logicadi.gitee.io/web/case_1_lunbotu/"><img src="images/20180616000655.jpg"
                                                                                   alt=""></a><span>[JavaScript]轮播图</span>
    </div>
</div>
</body>
</html>